<template>
  <div v-if="show" class="column-config flex justify-center items-center">
    <div class="flex flex-col inner">
      <div class="head flex justify-between">
        <div>{{ t["列配置"] }}</div>
        <div>
          <a-tag color="red" @click="close">
            <IconClose />
          </a-tag>
        </div>
      </div>
      <div class="configured">
        <div class="title">{{ t["预览列表"] }}</div>
        <ul>
          <li v-for="(item, key) in field" :key="key">
            {{ item?.title || "null" }}
          </li>
        </ul>
      </div>

      <div class="be-configured flex-1 flex gap-2">
        <div class="static-list">
          <div class="title">{{ t["固定字段"] }}</div>
          <ul class="list flex flex-col">
            <li
              v-for="(item, key) in staticColumns"
              :key="key"
              class="flex justify-between items-center"
              @click="selectStaticItem(item)"
            >
              <div>{{ item.title }}</div>
              <input :id="item.dataIndex" v-model="item.selected" type="checkbox" />
            </li>
          </ul>
        </div>
        <div class="dynamic-list flex-1">
          <div class="title">{{ t["自定义字段"] }}</div>
          <ul v-if="dynamicList.length > 0">
            <li
              v-for="(item, key) in dynamicList"
              :key="key"
              class="flex justify-between"
              :class="{ active: isActive(item) }"
              @click="selectDynamicItem(item)"
            >
              <div class="column-title">{{ item.title }}</div>
            </li>
          </ul>
          <div v-else class="text-center">{{ t["空"] }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { findGoodsExpandFields } from "@/api/service/goods/goods";

import { getGoodsTableConfig } from "@/store/modules/form/form.utils";

import { toCamelCase } from "@/utils/format";
import columns, { fixedFields, transferColumns } from "../data/columns";
import { extendsFields, form } from "../data/form";

const tableConfig = getGoodsTableConfig();
const emit = defineEmits(["update:show"]);

const t = translate("公共模块");

const props = defineProps<{
  show: boolean;
}>();
const dynamicList = ref<any[]>([]);

const close = () => {
  emit("update:show", !props.show);
};
/* 判断动态列表是否激活 */
const isActive = (item: any) => {
  return tableConfig.defaultField.find((e) => toCamelCase(item.dataIndex) === e);
};
onMounted(async () => {
  columns.value = [];
  // extendsFields.value =[]
  // dynamicList.value =[]

  const { data } = await findGoodsExpandFields(false);
  extendsFields.value = data;

  extendsFields.value.forEach((v) => {
    columns.value.push({
      title: v.fieldName,
      dataIndex: v.fieldCode
    });
  });
  columns.value = columns.value.concat(fixedFields);

  if (!form.value.expands) {
    form.value.expands = [];
  }
  dynamicList.value = extendsFields.value.map((e) => {
    return {
      title: e.fieldName,
      dataIndex: e.fieldCode,
      selected: !!columns.value.find((m) => {
        return m.dataIndex === e;
      })
    };
  });
});
const selectStaticItem = (item: any) => {
  if (tableConfig.defaultField.findIndex((e) => e === item.dataIndex) < 0) {
    tableConfig.defaultField.unshift(item.dataIndex);
  } else {
    tableConfig.defaultField = tableConfig.defaultField.filter((e) => e !== item.dataIndex);
  }
};
const selectDynamicItem = (item: any) => {
  const dataIndex = toCamelCase(item.dataIndex);
  if (tableConfig.defaultField.findIndex((e) => e === dataIndex) < 0) {
    tableConfig.defaultField.push(toCamelCase(dataIndex));
  } else {
    tableConfig.defaultField = tableConfig.defaultField.filter((e) => e !== toCamelCase(dataIndex));
  }
};
const staticColumns = computed(() => {
  return transferColumns().map((e) => {
    return {
      title: e.label,
      selected: !!tableConfig.defaultField.find((m) => {
        return m === e.value;
      }),
      dataIndex: e.value
    };
  });
});
const field = computed(() => {
  return tableConfig.defaultField
    .map((e) => {
      const staticFields = columns.value.find((m) => {
        return m.dataIndex === e;
      });
      const dynamicFields = dynamicList.value.find((m) => {
        return m.dataIndex === e;
      });
      const item = {
        title: "",
        sort: -1,
        dataIndex: ""
      };
      if (staticFields) {
        item.dataIndex = staticFields.dataIndex || "";
        item.title = (staticFields.title as string) || "";
        item.sort = 1;
      } else if (dynamicFields) {
        item.dataIndex = dynamicFields.dataIndex || "";
        item.title = (dynamicFields.title as string) || "";
        item.sort = 2;
      }

      return item;
    })
    .filter((e) => {
      if (e.title) return e;
      return null;
    });
});
</script>

<style lang="scss" scoped>
@use "./style";
</style>
